<template>
  <div class="wenzhang-container" ref="containerTop">
    wenzhangDatas.vue <ul class="ul-container">
      <!-- {{ datas.rows }} -->
      <li v-for="item in datas.rows" :key="item.id">
        <!-- {{ item }} -->
        <div class="left-img" v-if="item.thumb">
          <RouterLink :to="{
            name: 'xiangqingWenzhang',
            params: {
              fenleiID: item.id,
            },
          }">
            <!-- 懒加载 v-lazy -->
            <!-- <img style="width:240px;" v-lazy="thumbUrl + item.thumb" :alt="item.title" :title="item.title" /> -->
            <img style="width:240px;" v-lazy="item.thumb" :alt="item.title" :title="item.title" />
            {{ item.thumb }}懒加载zzzzzzzzzzzzzzzzzzzzzzzzzzzz
          </RouterLink>
        </div>
        <div class="right-text">
          <RouterLink :to="{
            name: 'xiangqingWenzhang',
            params: {
              fenleiID: item.id,
            },
          }">
            <h3>{{ item.title }}</h3>
          </RouterLink>
          <div class="numbs">
            <span>发布日期：{{ formDate(item.createDate) }}</span>
            <span>浏览：{{ item.scanNumber }}</span>
            <span>评论：{{ item.commentNumber }}</span>
            <!-- <span>{{ item }}</span> -->
            <RouterLink :to="{
              name: 'mouGeWenzhang',
              params: {
                mouGeID: item.category.id, //意思是把动态的mouGeID根据当前路由item信息的id放进去，那么就现实跳转了
              },
            }">《{{ item.category.name }}》
            </RouterLink>
          </div>
          <p class="wenben">{{ item.description }}</p>
        </div>
      </li>

      <!-- 底部分页 -->
      <div class="dibu">
        <div v-if="datas.total" class="dixian">
          <!-- {{ datas.rows }} -->
          ~不要得寸进尺，我是有底线的！
        </div>
        <Pagin v-if="datas.total" :current="routerInfo.page" :total="datas.total" :limit="routerInfo.limit"
          :visibleNumber="10" @pageClicked="handChangePage" />
        <!--
                current 含义：当前样式页码
                total 含义：总数据量
                limit 含义：页容量[每页显示多少条数据]
                visibleNumber 含义：当前可见页码数
            -->
        <!-- <h1>{{ datas.total }}||{{ datas.limit }}</h1> -->
      </div>
    </ul>

    <!-- 无数据显示该组件 kongComp -->
    <kongComp v-if="datas.rows.length === 0 && !isLoading"></kongComp>
  </div>
</template>

<script>
// getYuanChengData
import ImageLoader from "@/components/ImageLoader";
import Pagin from "@/components/Pagin"; //底部页码
import getFetchData from "@/mixins/getFetchData.js"; //远程获取数据
import { getWenzhangDatas } from "@/api/Wenzhang.js"; //获取之前博客的数据
import mainScroll from "@/mixins/mainScroll.js"; // 主区域滚动-写入混合
import { formDate } from "@/methods"; // 转换时间戳
// import imgLoading from '@/assets/imgLoading.gif' // 动态加载图

import { URL_CONFIG } from "../../../urlConfig.js" // 【引入 URL_CONFIG】

import kongComp from "@/components/Empty"; // 无数据 显示这个组件
export default {
  data() {
    return {
      thumbUrl: URL_CONFIG,
      data: [],
      // imgLoading: imgLoading,
    };
  },
  mixins: [getFetchData({ total: 0, rows: [] }), mainScroll("containerTop")],
  components: {
    Pagin,
    ImageLoader,
    kongComp, //空组件
  },
  async created() {
    // console.log(this.datas, 'rowsrowsrowsrowsrowsrowsrowsv');
    try {
      await this.getYuanChengData();
      console.log(this.datas.rows, '数据加载完成后的 rows');
      this.data = this.datas.rows || []
      this.isLoading = false;
      console.log('data拿到后的数据,', this.datas);

    } catch (error) {
      console.error('获取数据失败:', error);
      this.isLoading = false;
    }
  },

  // 【有了混入之后可以不写】都交给 mainScroll("containerTop")
  // mounted() {//安装后
  //     this.$bus.$on('setMainScroll', this.setTopScroll)
  //     this.$refs.containerTop.addEventListener('scroll', this.containerScroll)
  // },
  // destroyed() {//销毁后
  //     this.$bus.$emit('scroll_event')
  //     this.$bus.$off('setMainScroll', this.setTopScroll)
  //     this.$refs.containerTop.removeEventListener('scroll', this.containerScroll)
  // },

  computed: {
    // 通过计算属性拿 路由地址的信息
    routerInfo() {
      console.log(this.$route, '路由地址的信息-=-=路由地址的信息-=-路由地址的信息-=路由地址的信息==路由地址的信息--------');
      // 拿到当前分页ID
      let mouGeID = +this.$route.params.mouGeID || -1; //-1表示全部
      let page = +this.$route.query.page || 1; //默认第1页
      let limit = +this.$route.query.limit || 10; //默认10条数据
      console.log(mouGeID, page, limit, 'mouGeID、、、、、、、、、、、、、、、、mouGeIDmouGeIDmouGeID');
      return {
        mouGeID,
        page,
        limit,
      };
    },
  },
  methods: {
    // 【有了混入之后可以不写】都交给 mainScroll("containerTop")
    // 滚动主区域
    // containerScroll() {
    //     // console.log('滚动主区域top', this.$refs.containerTop.scrollTop);
    //     this.$bus.$emit('scroll_event', this.$refs.containerTop);//触发scroll_event事件，拿到此时的盒子
    // },
    // setTopScroll(scrollTop) {
    //     this.$refs.containerTop.scrollTop = scrollTop
    //     // console.log('this.$refs.containerTop.scrollTop', this.$refs.containerTop.scrollTop);
    // },
    formDate, //直接把转换时间戳函数弄进来

    // 根据上面的计算属性拿到当前路由信息并放在 getWenzhangDatas获取信息函数这里
    async getYuanChengData() {
      //这里需要传递参数，第几页，多少内容，当前分类
      var result = await getWenzhangDatas(
        this.routerInfo.page,
        this.routerInfo.limit,
        this.routerInfo.mouGeID
      );
      console.log(result.data, '【问题出在这】result-result-當前列表信息-=result[][][]resultresult[][]result[]resu');
      return result.data;
    },
    handChangePage(newPage) {
      // console.log("新的页码", newPage);
      let query = {
        page: newPage,
        limit: this.routerInfo.limit,
      };
      // 跳转到 当前的分类 当前的页容量 newPage的页码
      //两种情况，没有cate分类，有cate分类
      if (this.routerInfo.mouGeID === -1) {
        // 没有cate分类
        // `/Yong-wenzhang/?page=${newPage}&limit=${this.routerInfo.limit}`
        this.$router.push({
          name: "wenzhang",
          query,
        });
      } else {
        // 有care分类，需要重新拿到新的分类ID
        this.$router.push({
          name: "mouGeWenzhang",
          query,
          params: {
            mouGeID: this.routerInfo.mouGeID,
          },
        });
      }
    },

  },
  watch: {
    // 观看$route路由 变化就重新调用函数
    async $route() {
      // 这里给一个loading效果
      this.isLoading = true;

      // 把盒子滾動高度设置0，让第一个li在显示【也是比较合理的操作】
      // console.log(this.$refs.containerTop.scrollTo, 'this.$refs.container.scrollTo');
      this.$refs.containerTop.scrollTop = 0;
      // 【或者下面這種平滑效果】
      // this.$refs.containerTop.scrollTo({
      //     top: 0,
      //     left: 0,
      //     behavior: 'smooth'//平滑效果
      // })

      this.datas = await this.getYuanChengData();
      this.isLoading = false;
    },
  },
};
</script>

<style scoped lang="less">
@import "~@/style/var.less";

.wenzhang-container {
  height: 100%;
  overflow-y: scroll;
  scroll-behavior: smooth; //動畫平滑效果
  // background-color: aquamarine;

  &::-webkit-scrollbar {
    // display: none; //销毁滚动条
  }

  .ul-container {
    position: relative;
    height: 100%;
    width: 100%;
    padding: 0px 20px;
    white-space: wrap; //文本会换行，


    li {
      border-bottom: 1px solid @gray;
      margin-top: 25px;
      padding-bottom: 25px;
      // height: 100%;
      display: flex;

      .left-img {
        max-width: 200px;
        // height: 100%;
        max-height: 150px;
        // border: 1px solid black;
        border-radius: 10px;
        box-shadow: 0 1px 2px #000;
        overflow: hidden;
        margin-right: 15px;
        white-space: normal;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .right-text {
        // flex: 1;
        width: 100%;
        // background-color: aquamarine;
        white-space: wrap; //文本会换行，
        display: flex;
        flex-direction: column;
        // justify-content: space-around;

        a {
          color: #000;
          font-size: 20px;
          font-weight: bold;
          padding: 8px 0;

          &:hover {
            color: @hover;
          }
        }

        .numbs {
          font-size: 13px;
          color: #aaaaaa;
          width: 100%;
          // background-color: orange;

          span {
            margin-right: 20px;
          }

          a {
            color: @f40;
            float: right;
            font-size: 15px;
            font-weight: bold;

            &:hover {
              color: @hover;
            }
          }
        }

        p {
          font-size: 15px;
          margin-top: 20px;
          // text-indent: 3ch; //缩进字符
        }
      }
    }

    .dibu {
      .dixian {
        text-align: center;
        font-size: 13px;
        margin-top: 20px;
        color: @f40;
      }
    }
  }

}
</style>
